<template>
  <div class="screen">
    <!-- 标题 -->
    <h2>课程筛选</h2>
    <el-form :inline="true" ref="select">
      <!-- 定义上下架 -->
      <el-form-item label="上架状态">
        <el-select v-model="getparams.searchState" placeholder="请选择">
          <el-option label value="上架" />
          <el-option label value="下架" />
        </el-select>
    </el-form-item>
    <!-- 定义时间 -->
    <el-form-item label="上传时间">
      <el-date-picker
        v-model="daterange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        format="YYYY-MM-DD"
      />
    </el-form-item>
    <!-- 定义关键字框 -->
    <el-form-item>
      <el-input v-model="getparams.keyWords" placeholder="请输入课程标题或关键字" />
    </el-form-item>
    <!-- 定义两个按钮 -->
    <el-form-item>
      <el-button type="primary" color="#38A28A" @click="onSearch">
        <el-icon><Search /></el-icon>
        筛选
      </el-button>
    </el-form-item>
    <el-form-item >
      <el-button type="primary" color="#38A28A" @click="getreset">
        重置
      </el-button>
    </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
// 引入ref,reactive, 和子向父传递函数defineEmits
import { ref, reactive, defineEmits } from 'vue';

// 定义两个响应式变量
const daterange = ref<any>([])
let select = ref()

// 定义一个变量双向绑定
const getparams = reactive({
  searchState:'',
  keyWords: '',
  start: '',
  end: ''
})

// 子相父传参
const emit = defineEmits<{
  // 代表没有返回值
  (e: 'getSearch', getparams: any): void
}>()

// 定义筛选按钮
const onSearch = () => {
  getparams.start = daterange.value[0]
  getparams.end = daterange.value[1]
  emit('getSearch', getparams)
}

// 定义重置按钮
const getreset = () => {
getparams.searchState = ''
getparams.keyWords = ''
daterange.value = []
}
</script>

<style scoped lang="scss">
.screen {
  height: 120px;
  margin-bottom: 20px;
  padding: 15px 15px;
  background-color: #fff;
  h2{
    font-size: 20px;
  }
  .el-form{
    padding-top: 16px;
  }
}
</style>